<template>
  <div class="cultivate-box">
    <div class="title-box">家政培训</div>
    <div class="desc">可以选择多种培训课程</div>
    <ul class="list-box">
      <li class="item-box" v-for="(item,index) in list" :key="index">
        <img :src="item.cover" alt="">
        <h2 class="title">{{ item.title }}</h2>
        <p class="teacher">{{ item.teacher }}</p>
        <div class="pp-box">
          <div class="purchase">{{ item.purchase }}人已购买</div>
          <div class="price">{{ item.price == '0.00' ? '免费':item.price }}</div>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "Cultivate",
  data() {
    return {
      list: [
        {
          title: "【免费试听】骨盆修复",
          teacher: "百越老师",
          purchase: 83,
          price: "0.00",
          cover: require("../assets/cultivate/1.png"),
        },
        {
          title: "【免费试听】上门体检",
          teacher: "百越老师",
          purchase: 43,
          price: "99.0",
          cover: require("../assets/cultivate/2.png"),
        },
        {
          title: "【免费试听】家电清洗",
          teacher: "百越老师",
          purchase: 53,
          price: "109.00",
          cover: require("../assets/cultivate/3.png"),
        },
        {
          title: "【免费试听】脊柱治疗",
          teacher: "百越老师",
          purchase: 37,
          price: "0.00",
          cover: require("../assets/cultivate/4.png"),
        },
        {
          title: "【免费试听】除螨服务",
          teacher: "百越老师",
          purchase: 65,
          price: "0.00",
          cover: require("../assets/cultivate/5.png"),
        },
        {
          title: "【免费试听】家居清洗",
          teacher: "百越老师",
          purchase: 56,
          price: "0.00",
          cover: require("../assets/cultivate/6.png"),
        },
        {
          title: "【免费试听】保洁服务",
          teacher: "百越老师",
          purchase: 34,
          price: "0.00",
          cover: require("../assets/cultivate/7.png"),
        },
        {
          title: "【免费试听】如何催乳",
          teacher: "百越老师",
          purchase: 73,
          price: "0.00",
          cover: require("../assets/cultivate/8.png"),
        },
      ],
    };
  },
};
</script>
<style lang="less" scoped>
.cultivate-box {
  padding: 100px 240px;
  .title-box {
    font-size: 40px;
    text-align: center;
  }
  .desc {
    font-size: 24px;
    color: #989fa7;
    text-align: center;
    margin: 12px 0 40px;
  }
  .list-box {
    display: grid;
    grid-template-columns: repeat(4, 337px);
    grid-gap: 30px;
    .item-box {
      background-color: #fff;
      border-radius: 10px;
      overflow: hidden;
      .title {
        font-size: 22px;
        color: rgba(16, 3, 3, 0.9);
        margin: 16px 20px 0;
      }
      .teacher {
        color: rgba(16, 3, 3, 0.6);
        font-size: 18px;
        margin: 8px 20px 20px;
      }
      .pp-box {
        margin: 0 20px 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 18px;
        color: rgba(16, 3, 3, 0.6);
        .price {
          color: #eb9c35;
        }
      }
    }
  }
}
</style>